<template>
    <div class="web-login">
        <div class="login">
            <img src="@/assets/login.png" alt="">
        </div>
        <div class="login-form">
            <form action="">
                <div class="group">
                    <input type="tel" maxlength="13" placeholder="手机号" class="control" @blur="change('control',phone)" v-model="phone">
                    <div class="disable" ref="disable" @click="getMsg(phone)">
                        获取验证码
                    </div>
                    <div class="error" ref="error">请输入正确的手机号码</div>
                </div>
                <div class="group">
                    <input placeholder="验证码" class="code" v-model="code">
                    <div class="error" ref="errCode">验证码为空</div>
                </div>
            </form>
            <div class="submit" @click="login(phone,code)">
                <span ref="submit">登录</span>
            </div>
        </div>
       
  </div>
</template>

<script>
import {getUser,getCode} from '@/api'
export default {
    data(){
        return{
            phone:'',
            code:'',
            flag: false,
            btn: false,
            cid:''
        }
    },
    created() {
        console.log(this.$route)
        this.cid = this.$route.params.lid
        console.log(this.cid)
    },
    methods:{
        change(name,phone) {
            if(name === 'control'){
                var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!myreg.test(phone)) {
                    console.log(false)
                    this.flag = false
                    this.$refs.disable.style.color = "#bdc0c5"
                    this.$refs.error.style.display = "block"
                    this.$refs.submit.style.opacity = "0.3"
                } else {
                    console.log(true)
                    this.flag = true
                    this.$refs.disable.style.color = "rgb(44, 62, 80)"
                    this.$refs.error.style.display = "none"
                    this.$refs.submit.style.opacity = "1"
                }
            }
        },
        getMsg(phone){
            if(!this.flag) return;
            getCode(phone).then(res =>{
                console.log(res)
            })
        },
        login(phone,code){
            if(!this.flag) return;
            if(code === ''){
                this.$refs.errCode.style.display = "block"
                setTimeout(() => {
                    this.$refs.errCode.style.display = "none"
                }, 1500);
            }else{
                getUser(phone, code).then(res => {
                    // console.log(res,"user")
                    if(res.status === 200){
                        localStorage.setItem('user', JSON.stringify(phone));
                        this.$router.push("/select/"+this.cid)
                    }
                })
            }
            
        }
    }
}
</script>

<style>
    .submit{
        margin-top: 1.4rem;
        line-height: .9rem;
        font-size: .32rem;
        margin: 1.4rem .5rem 0;
        border-radius: .06rem;
        text-align: center;
        background-color: #ff5f16;
        height: .88rem;
        color: #fff;
        border: none;
    }
    .submit span{
        opacity: .3;
    }
    .web-login{
        width: 7.5rem;
        height: 6.5rem;
        margin-top: 1.58rem;
    }
    .web-login .login-form{
        width: 7.5rem;
        height: 4.5rem;
    }
    .web-login .login-form .group{
        line-height: 1.1rem;
        margin: 0 .5rem;
        position: relative;
    }
    .web-login .login-form .group .error{
        text-align: left;
        color: #ff5f16;
        width: 100%;
        line-height: .22rem;
        font-size: .22rem;
        margin-top: .14rem;
        display: none;
        transition: all 1.5s;
    }
    .web-login .login-form .group .disable{
        position: absolute;
        right: 0rem;
        top: 0;
        font-size: .26rem;
        color: #bdc0c5;
    }
    .web-login .login-form .group .control{
        height: .3rem;
        line-height: .3rem;
        padding: .4rem 0;
        width: 100%;
        font-size: .3rem;
        color: #191a1b;
        border: 0;
        outline-width: 0;
    }
    .web-login .login-form .group .code{
        height: .3rem;
        line-height: .3rem;
        padding: .4rem 0;
        width: 100%;
        font-size: .3rem;
        color: #191a1b;
        border: 0;
        outline-width: 0;
    }
    .web-login .login{
        width: 7.5rem;
        height: 1.2rem;
        margin-bottom: .8rem;
        text-align: center;
    }
    .web-login .login img{
        width: 1.19rem;
        height: 1.2rem;
    }
    .group:after{
            content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #ededed;
    transform-origin: 0 0;
    border-bottom: 1px solid #ededed;
    transform: scaleY(.5);
    }
</style>